<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">

<ui:composition template="/templates/masterLayout.xhtml">

	<ui:define name="title">
			GRUPO
		</ui:define>
	<ui:define name="content">

		<p:growl id="mensaje" showDetail="true" life="7000" />

		<h:outputText value="RESPONSIVE WEB DESIGN" class="asterisco" />

		<p:panel id="panel" header="LISTADO DE GRUPOS"
			style="margin-bottom:10px;">

			<h:form id="formDataTable">
				<p:dataTable id="tablaGrupos" var="grupo" scrollable="true"
					styleClass="ui-datatable-scrollable-body"
					value="#{grupoBean.listaGrupos}" paginator="true" rows="10"
					emptyMessage="#{msg['lbl.mensajeTabla']}"
					paginatorPosition="bottom"
					rowStyleClass="#{grupo.activo eq true ? null:'desactivo'}">

					<f:facet name="header">
						<h:form styleClass="FormBotonNuevo">
							<p:tooltip for="btnNuevo" value="#{msg['lbl.insertar']}" />
							<p:commandButton id="btnNuevo" icon="#{msg['iconoInsertar']}"
								update=":dialogoNuevo"
								oncomplete="PF('grupoDialogoInsertar').show()"
								actionListener="#{grupoBean.limpiarObjetos}" />
						</h:form>
					</f:facet>

					<p:column headerText="#{msg['lbl.gestionar']}"
						style="text-align:center;width: 100px;">

						<p:tooltip for="btnMostrar" value="MOSTRAR" />
						<p:tooltip for="btnEditar" value="EDITAR" />
						<p:tooltip for="btnEliminar"
							value="#{grupo.activo eq true ? msg['lbl.desactivar']:msg['lbl.activar']}" />

						<p:commandButton id="btnMostrar" update=":formMostrar"
							oncomplete="PF('grupoDialogoMostrar').show()"
							icon="#{msg['iconoMostrar']}">
							<f:setPropertyActionListener target="#{grupoBean.grupo}"
								value="#{grupo}" />
						</p:commandButton>

						<p:commandButton id="btnEditar" ajax="true"
							update=":dialogoEditar"
							oncomplete="PF('grupoDialogoEditar').show()"
							icon="#{msg['iconoEditar']}">
							<f:setPropertyActionListener value="#{grupo}"
								target="#{grupoBean.grupo}" />
						</p:commandButton>

						<p:commandButton id="btnEliminar" update=":formEliminar"
							oncomplete="PF('grupoDialogoEliminar').show()"
							icon="#{grupo.activo eq true ? 'ui-icon-close':'ui-icon-check'}">
							<f:setPropertyActionListener value="#{grupo}"
								target="#{grupoBean.grupo}" />
						</p:commandButton>

					</p:column>

					<p:column headerText="NOMBRE" filterBy="#{grupo.nombre}"
						style="text-align:center;width: 200px;">  
            			#{grupo.nombre}  
        			</p:column>
				</p:dataTable>
			</h:form>
		</p:panel>

		<p:dialog header="INSERTAR GRUPO" widgetVar="grupoDialogoInsertar"
			resizable="false" modal="false" showEffect="clip" hideEffect="fold"
			id="dialogoNuevo" width="30%">

			<h:form id="formInsertar">
				<h:panelGrid columns="2" cellpadding="1">

					<h:outputText value="NOMBRE:" />
					<p:inputText id="txt" style="width: 100%;"
						value="#{grupoBean.grupo.nombre}"
						onblur="this.value=this.value.toUpperCase();" />

					<h:outputText value="NOMBRE LARGO:" />
					<p:selectBooleanButton value="#{grupoBean.grupo.nombrelargocorto}"
						offLabel="NO" onLabel="SI" onIcon="ui-icon-check"
						offIcon="ui-icon-close" />
				</h:panelGrid>

				<p:commandLink value="CARACTERISTICAS"
					update="tablaGrupoCaracteristica, :mensaje"
					actionListener="#{grupoBean.insertarFilaCaracteristica}"
					style="font-weight:bold" />
				<p:dataTable id="tablaGrupoCaracteristica" var="grupoCaracteristica"
					value="#{grupoBean.grupo.grupocaracteristicas}" paginator="true"
					rows="5" emptyMessage="#{msg['lbl.mensajeTabla']}"
					scrollable="true" styleClass="ui-datatable-scrollable-body"
					paginatorPosition="bottom" editable="true" editMode="cell">

					<p:ajax event="cellEdit"
						listener="#{grupoBean.comprobarCaracteristica}"
						update="tablaGrupoCaracteristica, :mensaje" />

					<p:column headerText="
							#{msg['lbl.gestionar']}"
						style="text-align:center;width: 60px;" styleClass="columnaCrud">
						<p:commandButton id="btnEliminar"
							update="tablaGrupoCaracteristica, :mensaje"
							icon="#{msg['iconoEliminar']}"
							action="#{grupoBean.eliminarCaracteristica(grupoCaracteristica)}"
							process="@this">
						</p:commandButton>
					</p:column>

					<p:column headerText="ORDEN" style="text-align:center;width: 60px;">
									#{grupoCaracteristica.orden}		
								</p:column>

					<p:column headerText="NOMBRE"
						style="text-align:center;width: 100px;">
						<p:cellEditor>
							<f:facet name="output">
								<h:outputText
									value="#{grupoCaracteristica.caracteristica.nombre}" />
							</f:facet>
							<f:facet name="input">
								<p:selectOneMenu id="inputCaracteristica"
									value="#{grupoBean.caracteristica.caracteristicaid}"
									styleClass="comboFormNuevo">
									<f:selectItem itemLabel="ESCOJA UNA CARACTERISTICA"
										id="comboFormNuevo" />
									<f:selectItems
										value="#{caracteristicaBean.listaCaracteristicas}"
										var="caracteristica"
										itemValue="#{caracteristica.caracteristicaid}"
										itemLabel="#{caracteristica.nombre}" />
								</p:selectOneMenu>
							</f:facet>
						</p:cellEditor>
					</p:column>
					<p:column headerText="IMPRIMIR"
						style="text-align:center;width: 50px;">
						<p:selectBooleanButton value="#{grupoCaracteristica.imprimir}"
							offLabel="NO" onLabel="SI" onIcon="ui-icon-check"
							offIcon="ui-icon-close" />
					</p:column>
				</p:dataTable>
				<h:panelGrid columns="1" cellpadding="1" style="width: 100%;">
					<f:facet name="footer">
						<p:separator />

						<p:commandButton id="btnNuevoAceptar"
							icon="#{msg['iconoGuardar']}" value="#{msg['btn.guardar']}"
							oncomplete="handleLoginRequest(xhr, status, args)"
							update=":formDataTable,:mensaje"
							actionListener="#{grupoBean.insertar}" />

						<p:commandButton value="#{msg['btn.cancelar']}"
							oncomplete="PF('grupoDialogoInsertar').hide()"
							id="btnNuevolimpiar" icon="#{msg['iconoCancelar']}"
							actionListener="#{grupoBean.limpiarObjetos}" process="@this" />
					</f:facet>
				</h:panelGrid>
			</h:form>

		</p:dialog>

		<p:dialog header="EDITAR GRUPO" widgetVar="grupoDialogoEditar"
			resizable="false" modal="false" showEffect="clip" hideEffect="fold"
			id="dialogoEditar" width="30%">
			<h:form id="formEditar">
				<h:panelGrid columns="2">

					<h:outputText value="NOMBRE:" />
					<p:inputText id="nombreGrupoEditar" style="width: 100%;"
						value="#{grupoBean.grupo.nombre}"
						onblur="this.value=this.value.toUpperCase();" />

					<h:outputText value="NOMBRE LARGO:" />
					<p:selectBooleanButton value="#{grupoBean.grupo.nombrelargocorto}"
						offLabel="NO" onLabel="SI" onIcon="ui-icon-check"
						offIcon="ui-icon-close" />

				</h:panelGrid>

				<p:commandLink value="CARACTERISTICAS"
					update="tablaGrupoCaracteristica, :mensaje"
					actionListener="#{grupoBean.insertarFilaCaracteristica}"
					style="font-weight:bold" />
				<p:dataTable id="tablaGrupoCaracteristica" var="grupoCaracteristica"
					value="#{grupoBean.grupo.grupocaracteristicas}" paginator="true"
					rows="5" emptyMessage="#{msg['lbl.mensajeTabla']}"
					scrollable="true" styleClass="ui-datatable-scrollable-body"
					paginatorPosition="bottom" editable="true" editMode="cell">

					<p:ajax event="cellEdit"
						listener="#{grupoBean.comprobarCaracteristica}"
						update="tablaGrupoCaracteristica, :mensaje" />

					<p:column headerText="
							#{msg['lbl.gestionar']}"
						style="text-align:center;width: 3px;" styleClass="columnaCrud">
						<p:commandButton id="btnEliminar"
							update="tablaGrupoCaracteristica, :mensaje"
							icon="#{msg['iconoEliminar']}"
							action="#{grupoBean.eliminarCaracteristica(grupoCaracteristica)}"
							process="@this" />
					</p:column>

					<p:column headerText="ORDEN" style="text-align:center;width: 50px;">
									#{grupoCaracteristica.orden}		
								</p:column>

					<p:column headerText="NOMBRE"
						style="text-align:center;width: 50px;">
						<p:cellEditor>
							<f:facet name="output">
								<h:outputText
									value="#{grupoCaracteristica.caracteristica.nombre}" />
							</f:facet>
							<f:facet name="input">
								<p:selectOneMenu id="inputCaracteristica"
									value="#{grupoBean.caracteristica.caracteristicaid}"
									styleClass="comboFormNuevo">
									<f:selectItem itemLabel="ESCOJA UNA CARACTERISTICA"
										id="comboFormNuevo" />
									<f:selectItems
										value="#{caracteristicaBean.listaCaracteristicas}"
										var="caracteristica"
										itemValue="#{caracteristica.caracteristicaid}"
										itemLabel="#{caracteristica.nombre}" />
								</p:selectOneMenu>
							</f:facet>
						</p:cellEditor>
					</p:column>

					<p:column headerText="IMPRIMIR"
						style="text-align:center;width: 50px;" styleClass="columnaInfo">
						<p:selectBooleanButton value="#{grupoCaracteristica.imprimir}"
							offLabel="NO" onLabel="SI" onIcon="ui-icon-check"
							offIcon="ui-icon-close" />
					</p:column>
				</p:dataTable>

				<h:panelGrid columns="1" style="width: 100%;">
					<f:facet name="footer">
						<p:separator />

						<p:commandButton id="btnModificarAceptar"
							icon="#{msg['iconoGuardar']}" value="#{msg['btn.guardar']}"
							oncomplete="handleLoginRequest(xhr, status, args)"
							update=":formDataTable,:mensaje"
							actionListener="#{grupoBean.actualizar}" />

						<p:commandButton id="btnModificarlimpiar"
							icon="#{msg['iconoCancelar']}" value="#{msg['btn.cancelar']}"
							oncomplete="PF('grupoDialogoEditar').hide()" />
					</f:facet>
				</h:panelGrid>
			</h:form>
		</p:dialog>

		<p:dialog widgetVar="grupoDialogoEliminar" severity="alert"
			header="ELIMINAR GRUPO" showEffect="clip" hideEffect="fold"
			modal="false" resizable="false" width="230px"
			style="text-align: center;">
			<h:form id="formEliminar">
				<h:inputHidden value="#{grupoBean.grupo.grupoid}" />
				<br />
				<ui:param name="appreciated"
					value="¿ DESEA DESACTIVAR EL GRUPO: #{grupoBean.grupo.nombre} ?" />
				<ui:param name="notAppreciated"
					value="¿ DESEA ACTIVAR EL GRUPO: #{grupoBean.grupo.nombre} ?" />
				<h:outputText
					value="#{grupoBean.grupo.activo eq true ? appreciated : notAppreciated}" />
				<br />
				<br />
				<p:commandButton value="#{msg['btn.aceptar']}"
					update=":formDataTable,:mensaje" icon="#{msg['iconoAceptar']}"
					oncomplete="PF('grupoDialogoEliminar').hide()"
					actionListener="#{grupoBean.eliminar}" />
				<p:commandButton value="#{msg['btn.cancelar']}" type="button"
					onclick="PF('grupoDialogoEliminar').hide()"
					icon="#{msg['iconoCancelar']}" />
			</h:form>
		</p:dialog>

		<p:dialog header="MOSTRAR GRUPO" widgetVar="grupoDialogoMostrar"
			resizable="false" modal="false" showEffect="clip" hideEffect="fold"
			id="dialogoMostrar" width="65%">
			<h:form id="formMostrar">
				<h:panelGrid id="panelMostrar" columns="2">
					<h:outputText value="NOMBRE: " />
					<h:outputText value="#{grupoBean.grupo.nombre}"
						style="font-weight:bold" />
				</h:panelGrid>

				<p:dataTable id="tablaGrupoCaracteristica" var="grupoCaracteristica"
					value="#{grupoBean.grupo.grupocaracteristicas}" paginator="true"
					rows="5" emptyMessage="#{msg['lbl.mensajeTabla']}"
					paginatorPosition="bottom">
					<f:facet name="header">
						<h:outputText value="CARACTERÍSTICAS" />
					</f:facet>
					<p:column headerText="ORDEN" style="text-align:center;width: 50px;"
						styleClass="columnaInfo">  
            			#{grupoCaracteristica.orden}  
        			</p:column>

					<p:column headerText="NOMBRE"
						style="text-align:center;width: 50px;" styleClass="columnaInfo">  
            			#{grupoCaracteristica.caracteristica.nombre}  
        			</p:column>

					<p:column headerText="IMPRIMIR"
						style="text-align:center;width: 50px;" styleClass="columnaInfo">
						<p:selectBooleanButton value="#{grupoCaracteristica.imprimir}"
							offLabel="NO" onLabel="SI" onIcon="ui-icon-check"
							offIcon="ui-icon-close" disabled="true" />
					</p:column>
				</p:dataTable>
			</h:form>
		</p:dialog>

		<script type="text/javascript">
			//<![CDATA[
			function handleLoginRequest(xhr, status, args) {
				if (!args.validationFailed && args.error) {
					PF('grupoDialogoInsertar').hide();
					PF('grupoDialogoEditar').hide();
				}
			}
			//]]>
		</script>

	</ui:define>
</ui:composition>
</html>